<!DOCTYPE html>
<html lang="en">
<!--[if lte IE 9]><html lang="en" class="lt-ie8"> <![endif]-->
<head>
<title>JQuery lightSlider--轻量级可触摸响应式图片滑动效果</title>
<meta charset="utf-8">
<link href="css/base.css" rel="stylesheet">
<link rel="stylesheet" href="lightSlider/css/lightSlider.css" />
<link rel="stylesheet" href="css/prettify.css" />
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="site">
  <div class="nav-over"></div>
  <div class="hero">
    <div class="container-fluid">
      <div class="navbar-header">
        <div class="pull-left"> <a href="javascript:void(0)" class="pull-left btn-navbar">
          <button type="button" class="navbar-toggle ib"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
          <span class="navbar-text ib">Menu</span> </a> </div>
        <a type="button" class="btn btn-success navbar-btn pull-right" href="lightSlider.zip">Download</a> </div>
    </div>
    <div class="container-fluid example">
      <div class="row">
        <div class="col-xs-12">
          <section class="install">
            <h2>Minimum and Maximum Slides</h2>
            <div class="demo hasActive">
              <ul id="minMax" class="gallery list-unstyled clearfix">
                <li> <a href="javascript:void(0)"> <img src="img/cS-1.jpg" /> </a> </li>
                <li> <a href="javascript:void(0)"> <img src="img/cS-2.jpg" /> </a> </li>
                <li> <a href="javascript:void(0)"> <img src="img/cS-3.jpg" /> </a> </li>
                <li> <a href="javascript:void(0)"> <img src="img/cS-4.jpg" /> </a> </li>
                <li> <a href="javascript:void(0)"> <img src="img/cS-5.jpg" /> </a> </li>
                <li> <a href="javascript:void(0)"> <img src="img/cS-6.jpg" /> </a> </li>
              </ul>
            </div>
            <div class="call">
              <pre class="prettyprint linenums" style="margin-top:0;">
  $(document).ready(function() {
    $('#minMax').lightSlider({
      minSlide:2,
      maxSlide:4,
      slideMargin:5,
      slideWidth:200
    }); 
  });</pre>
            </div>
          </section>
        </div>
      </div>
    </div>
  </div>
  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-12">
        <section class="install">
          <h2>SlideMove</h2>
          <div class="demo hasActive">
            <ul id="slideMove" class="gallery list-unstyled clearfix">
              <li> <a href="javascript:void(0)"> <img src="img/cS-1.jpg" /> </a> </li>
              <li> <a href="javascript:void(0)"> <img src="img/cS-2.jpg" /> </a> </li>
              <li> <a href="javascript:void(0)"> <img src="img/cS-3.jpg" /> </a> </li>
              <li> <a href="javascript:void(0)"> <img src="img/cS-4.jpg" /> </a> </li>
              <li> <a href="javascript:void(0)"> <img src="img/cS-5.jpg" /> </a> </li>
              <li> <a href="javascript:void(0)"> <img src="img/cS-6.jpg" /> </a> </li>
              <li> <a href="javascript:void(0)"> <img src="img/cS-7.jpg" /> </a> </li>
              <li> <a href="javascript:void(0)"> <img src="img/cS-8.jpg" /> </a> </li>
              <li> <a href="javascript:void(0)"> <img src="img/cS-9.jpg" /> </a> </li>
            </ul>
          </div>
          <div class="call">
            <pre class="prettyprint linenums" style="margin-top:0;">
  $(document).ready(function() {
    $('#slideMove').lightSlider({
      slideMove:2,
      slideMargin:4,
      slideWidth:200
    }); 
  });</pre>
          </div>
        </section>
      </div>
    </div>
  </div>
  <div class="hero" style="margin-top:20px;border-top:1px solid #F1F1F1">
    <div class="container-fluid example">
      <div class="row">
        <div class="col-xs-12">
          <section class="install">
            <h2>Image Gallery</h2>
            <div class="row">
              <div class="col-sm-6">
                <div class="demo">
                  <ul id="imageGallery" class="gallery list-unstyled">
                    <li data-thumb="img/thumb/cS-1.jpg"> <a href="javascript:void(0)"> <img src="img/cS-1.jpg" /> </a> </li>
                    <li data-thumb="img/thumb/cS-2.jpg"> <a href="javascript:void(0)"> <img src="img/cS-2.jpg" /> </a> </li>
                    <li data-thumb="img/thumb/cS-3.jpg"> <a href="javascript:void(0)"> <img src="img/cS-3.jpg" /> </a> </li>
                    <li data-thumb="img/thumb/cS-4.jpg"> <a href="javascript:void(0)"> <img src="img/cS-4.jpg" /> </a> </li>
                    <li data-thumb="img/thumb/cS-5.jpg"> <a href="javascript:void(0)"> <img src="img/cS-5.jpg" /> </a> </li>
                    <li data-thumb="img/thumb/cS-6.jpg"> <a href="javascript:void(0)"> <img src="img/cS-6.jpg" /> </a> </li>
                    <li data-thumb="img/thumb/cS-7.jpg"> <a href="javascript:void(0)"> <img src="img/cS-7.jpg" /> </a> </li>
                    <li data-thumb="img/thumb/cS-8.jpg"> <a href="javascript:void(0)"> <img src="img/cS-8.jpg" /> </a> </li>
                    <li data-thumb="img/thumb/cS-9.jpg"> <a href="javascript:void(0)"> <img src="img/cS-9.jpg" /> </a> </li>
                    <li data-thumb="img/thumb/cS-10.jpg"> <a href="javascript:void(0)"> <img src="img/cS-10.jpg" /> </a> </li>
                    <li data-thumb="img/thumb/cS-11.jpg"> <a href="javascript:void(0)"> <img src="img/cS-11.jpg" /> </a> </li>
                    <li data-thumb="img/thumb/cS-12.jpg"> <a href="javascript:void(0)"> <img src="img/cS-12.jpg" /> </a> </li>
                    <li data-thumb="img/thumb/cS-13.jpg"> <a href="javascript:void(0)"> <img src="img/cS-13.jpg" /> </a> </li>
                    <li data-thumb="img/thumb/cS-14.jpg"> <a href="javascript:void(0)"> <img src="img/cS-14.jpg" /> </a> </li>
                    <li data-thumb="img/thumb/cS-15.jpg"> <a href="javascript:void(0)"> <img src="img/cS-15.jpg" /> </a> </li>
                  </ul>
                </div>
              </div>
              <div class="col-sm-6">
                <div class="call">
                  <pre class="prettyprint linenums" style="margin-top:0;">
  $(document).ready(function() {
    $('#imageGallery').lightSlider({
      gallery:true,
      minSlide:1,
      maxSlide:1,
      currentPagerPosition:'left'  
    });  
  });</pre>
                  <pre class="prettyprint linenums">
&lt;ul id="imageGallery"&gt;
  &lt;li data-thumb="img/thumb/cS-1.jpg"&gt;
    &lt;img src="img/cS-1.jpg" /&gt;
  &lt;/li&gt;
  &lt;li data-thumb="img/thumb/cS-2.jpg"&gt;
    &lt;img src="img/cS-2.jpg" /&gt;
  &lt;/li&gt;
&lt;/ul&gt;</pre>
                </div>
              </div>
            </div>
          </section>
        </div>
      </div>
    </div>
  </div>
  <div class="container-fluid" id="dynamicBlock">
    <div class="row">
      <div class="col-xs-12">
        <section class="install">
          <h2>Fade Transition</h2>
          <div class="row">
            <div class="col-sm-6">
              <div class="demo">
                <ul id="fade" class="gallery list-unstyled clearfix">
                  <li> <a href="javascript:void(0)"> <img src="img/cS-1.jpg" /> </a> </li>
                  <li> <a href="javascript:void(0)"> <img src="img/cS-2.jpg" /> </a> </li>
                  <li> <a href="javascript:void(0)"> <img src="img/cS-3.jpg" /> </a> </li>
                  <li> <a href="javascript:void(0)"> <img src="img/cS-4.jpg" /> </a> </li>
                </ul>
              </div>
            </div>
            <div class="col-sm-6">
              <div class="call">
                <pre class="prettyprint linenums" style="margin-top:0;">
$(document).ready(function() {
  $('#fade').lightSlider({
    minSlide:1,
    maxSlide:1,
    mode:'fade'
  });  
});</pre>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
  </div>
  <div class="hero" style="margin-top:20px;border-top:1px solid #F1F1F1" id="relBlock">
    <div class="container-fluid example">
      <div class="row">
        <div class="col-xs-12 hasActive">
          <section class="install">
            <h2>Public Methods</h2>
            <div class="demo">
              <ul id="publicMethods" class="gallery list-unstyled clearfix">
                <li> <a href="javascript:void(0)"> <img src="img/cS-1.jpg" /> </a> </li>
                <li> <a href="javascript:void(0)"> <img src="img/cS-2.jpg" /> </a> </li>
                <li> <a href="javascript:void(0)"> <img src="img/cS-3.jpg" /> </a> </li>
                <li> <a href="javascript:void(0)"> <img src="img/cS-4.jpg" /> </a> </li>
                <li> <a href="javascript:void(0)"> <img src="img/cS-5.jpg" /> </a> </li>
                <li> <a href="javascript:void(0)"> <img src="img/cS-6.jpg" /> </a> </li>
              </ul>
              <div class="buttons" style="margin-top: 20px;">
                <button class="btn btn-success" type="button" id="goToSlide">Go To Slide</button>
                <button class="btn btn-success" type="button" id="goToPrevSlide">Go To Prev Slide</button>
                <button class="btn btn-success" type="button" id="goToNextSlide">Go To Next Slide</button>
                <button class="btn btn-success" type="button" id="getCurrentSlideCount">getCurrentSlideCount</button>
                <button class="btn btn-success" type="button" id="refresh">Refresh</button>
              </div>
            </div>
            <div class="call">
              <pre class="prettyprint linenums" style="margin-top:0;">
  $(document).ready(function() {
    var slider = $('#publicMethods').lightSlider({
        slideMargin:4,
        slideWidth:200,
        loop:false
    });
    $('#goToSlide').click(function(){
        slider.goToSlide(3);    
    });
    $('#goToPrevSlide').click(function(){
        slider.goToPrevSlide(); 
    });
    $('#goToNextSlide').click(function(){
        slider.goToNextSlide(); 
    });
    $('#getCurrentSlideCount').click(function(){
        slider.getCurrentSlideCount(); 
    });
    $('#refresh').click(function() {
        var newEl = ' &lt;li&gt; &lt;a href="javascript:void(0)"&gt;&lt;img src="img/cS-1.jpg" /&gt;&lt;/a&gt; &lt;/li&gt;';
        $('#publicMethods').prepend(newEl);
        slider.refresh();
    });
  });</pre>
            </div>
          </section>
        </div>
      </div>
    </div>
  </div>
</div>
<script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script>
<script src="js/jquery.lightSlider.js"></script>
<script src="js/prettify.js"></script>
<script type="text/javascript">
	var site = $('#site');
    
    $(document).ready(function() {
        window.prettyPrint && prettyPrint();
        $('#fade').lightSlider({
            minSlide:1,
            maxSlide:1,
            mode:'fade'
        }); 
        $('#minMax').lightSlider({
            minSlide:2,
            maxSlide:4,
            slideMargin:4,
            slideWidth:200
        });   
		$('#slideMove').lightSlider({
            slideMove:2,
			slideMargin:4,
            slideWidth:200
        });
		$('#imageGallery').lightSlider({
            gallery:true,
            minSlide:1,
            maxSlide:1,
			currentPagerPosition:'left'  
        });
		var slider = $('#publicMethods').lightSlider({
			slideMargin:4,
            slideWidth:200,
            loop:false
        });
		$('#goToSlide').click(function(){
			slider.goToSlide(3);	
		});
		$('#goToPrevSlide').click(function(){
			slider.goToPrevSlide();	
		});
		$('#goToNextSlide').click(function(){
			slider.goToNextSlide();	
		});
         $('#getCurrentSlideCount').click(function(){
            alert(slider.getCurrentSlideCount());
        });
		$('#refresh').click(function() {
            var newEl = ' <li> <a href="javascript:void(0)"><img src="img/cS-1.jpg" /></a> </li>';
            $('#publicMethods').prepend(newEl);
            slider.refresh();
        });
        var clk = true;
        $('.btn-navbar').on('click',function(){
            if(site.hasClass('translate')){
                clk = false;    
                site.removeClass('translate');  
                setTimeout(function(){
                    $("#mast-head").css('display','none');  
                    clk = true;
                },700);
            }else if(clk){
                $("#mast-head").css('display','block'); 
                site.addClass('translate');     
            }
        });
        $('#site').on('touchmove', function(e) {
            if($(this).hasClass('translate')){
                e.preventDefault();
            }
        });
        $('#site > .nav-over').on('click touchstart',function(e){
            e.preventDefault();
            e.stopPropagation();
            clk = false;
            site.removeClass('translate');  
            setTimeout(function(){
                $("#mast-head").css('display','none');  
                clk = true;
            },700); 
        })
        $(window).on("resize orientationchange", function(){
            if($(window).width() > 767){
                $("#mast-head").css('display','block'); 
                site.removeClass('translate');
            }else if(!site.hasClass('translate')){
                $("#mast-head").css('display','none');      
            }
        });
    });
</script>
</body>
</html>